<template>
    <Modal v-model="upgradeVIPModal" class="pages-home-homeIndex-chargeModal" @on-cancel="cancelModalBtn"
           :mask-closable="false" class-name="vertical-center-modal">
        <p slot="header" style="color:#f60;text-align:center">
            <span>升级VIP/续费（升级VIP后，可获得后台当前全部功能权限）</span>
        </p>
        <div>
            <Form :model="formValidate" label-position="left" :label-width="80">
                <Form-item label="用户名：" prop="name" style="margin-bottom: 0">
                    {{profile.ANickName}}
                </Form-item>

                <Form-item label="用户名：" prop="month" style="margin-bottom: 0">
                    <Radio-group v-model="formValidate.month">
                        <Radio :label="1">
                            <span>1个月（{{formValidate.cost * 1}}元）</span>
                        </Radio>
                        <Radio :label="3">
                            <span>3个月（{{formValidate.cost * 3}}元）</span>
                        </Radio>
                        <Radio :label="6">
                            <span>6个月（{{formValidate.cost * 6}}元）</span>
                        </Radio>
                        <Radio :label="12">
                            <span>12个月（{{formValidate.cost * 12}}元）</span>
                        </Radio>
                    </Radio-group>
                </Form-item>

                <Form-item label="应付金额：" prop="amount" style="margin-bottom: 0">
                    <Row>
                        <Col span="8">{{totalAmount}}元</Col>
                    </Row>
                </Form-item>

                <Form-item label="支付方式:" prop="payWay" style="margin-bottom: 0">
                    <Radio-group v-model="formValidate.payWay">
                        <Radio :label="1">支付宝</Radio>
                        <Radio :label="2">微信</Radio>
                    </Radio-group>
                </Form-item>

                <Form-item label="有效期至：" prop="name" style="margin-bottom: 0"></Form-item>

                <Form-item label="" prop="name" style="margin-bottom: 0">
                    <Checkbox label="twitter">
                        <span>勾选默认同意接受《用户协议》</span>
                    </Checkbox>
                </Form-item>
            </Form>
        </div>
        <div slot="footer">
            <button class="btn btn-primary btn-block">确认付款</button>
        </div>
    </Modal>
</template>

<script>

    export default {
        props: ['profile'],
        data: function () {
            return {
                upgradeVIPModal: true,
                phone: "",
                userInfoModal: true,
                formValidate: {
                	//cost每月花费
                	cost: 10,
                    month: 1,
                	payWay: 1
                }
            }
        },
        computed: {
            totalAmount(){
            	return this.formValidate.month * this.formValidate.cost + '.00'
            }
        },
        methods: {
            //关闭模态框
            cancelModalBtn: function () {
                this.chargeModal = false;
                this.$emit("close-modal");
            }
        },
        components: {}
    }
</script>

<style scoped lang="scss">
    .pages-home-homeIndex-chargeModal {
    }
</style>
